<template>
    <div style="padding: 10px;">
        <el-form
                :model="queryParams"
                ref="queryForm"
                class="queryForm"
                :inline="true"
                v-show="showSearch" @submit.native.prevent
        
        >
            
            
            <!--         <el-form-item label="所有分类路径"
                     desc="所有分类路径"
                      prop="parentIdPath">
                                       <el-input
                                       v-model.trim="queryParams.parentIdPath"
                                       placeholder="所有分类路径"
                                       clearable
                                       size="small"
                                       style="width:120px;"
                                       @keyup.enter.native="handleQuery"
                                       />
                                 </el-form-item>-->
            
            
            <!--
                        <el-form-item label="功能地址[查询]"
                        desc="功能地址[查询]"
                         prop="funUrl">
                                          <el-input
                                          v-model.trim="queryParams.funUrl"
                                          placeholder="功能地址[查询]"
                                          clearable
                                          size="small"
                                          style="width:120px;"
                                          @keyup.enter.native="handleQuery"
                                          />
                                    </el-form-item>-->
            
            
            <!--
                        <el-form-item label="当前状态[查询]"
                        desc="当前状态[查询] 1开启  5关闭  "
                         prop="state">
                             <dic-select
                                          v-model="queryParams.state"
                                          :code="dicInner.app_fun_state"
                                          placeholder="当前状态[查询] 1开启  5关闭  "
                                          clearable
                                          size="small"
                                          style="width:120px;"
                                          @keyup.enter.native="handleQuery"
                                          />
                                    </el-form-item>-->
            
            
            <!--
             
            
                        <el-form-item label="排序号"
                        desc="排序号"
                         prop="orderNum">
                                          <el-input
                                          v-model.trim="queryParams.orderNum"
                                          placeholder="排序号"
                                          clearable
                                          size="small"
                                          style="width:120px;"
                                          @keyup.enter.native="handleQuery"
                                          />
                                    </el-form-item>-->
            
            
            <!--    <el-form-item label="分类图片[查询]"
                desc="分类图片[查询]"
                 prop="img">
                                  <el-input
                                  v-model.trim="queryParams.img"
                                  placeholder="分类图片[查询]"
                                  clearable
                                  size="small"
                                  style="width:120px;"
                                  @keyup.enter.native="handleQuery"
                                  />
                            </el-form-item>-->
            
            
            <!--
                        <el-form-item label="功能深度[查询]"
                        desc="功能深度[查询]"
                         prop="deep">
                                          <el-input
                                          v-model.trim="queryParams.deep"
                                          placeholder="功能深度[查询]"
                                          clearable
                                          size="small"
                                          style="width:120px;"
                                          @keyup.enter.native="handleQuery"
                                          />
                                    </el-form-item>-->
            
            
            <!--     <el-form-item label="所属上级类别[关系=SysClass]"
                 desc="所属上级类别[关系=SysClass]"
                  prop="parentId">
                                   <el-input
                                   v-model.trim="queryParams.parentId"
                                   placeholder="所属上级类别[关系=SysClass]"
                                   clearable
                                   size="small"
                                   style="width:120px;"
                                   @keyup.enter.native="handleQuery"
                                   />
                             </el-form-item>-->
            
            
            <!--    <el-form-item label="移动端功能地址"
                desc="移动端功能地址"
                 prop="mobileUrl">
                                  <el-input
                                  v-model.trim="queryParams.mobileUrl"
                                  placeholder="移动端功能地址"
                                  clearable
                                  size="small"
                                  style="width:120px;"
                                  @keyup.enter.native="handleQuery"
                                  />
                            </el-form-item>-->
            
            
            <!--    <el-form-item label="移动端应用状态"
                desc="移动端应用状态"
                 prop="mobileState">
                                  <el-input
                                  v-model.trim="queryParams.mobileState"
                                  placeholder="移动端应用状态"
                                  clearable
                                  size="small"
                                  style="width:120px;"
                                  @keyup.enter.native="handleQuery"
                                  />
                            </el-form-item>-->
            
            
            <!--  <el-form-item label="所属者类型[数据字典=OwnerType]0应用功能1管理员追加功能2用户追加功能"
              desc="所属者类型[数据字典=OwnerType]0应用功能1管理员追加功能2用户追加功能"
               prop="ownerType">
                   <dic-select
                                v-model="queryParams.ownerType"
                                :code="dicInner.app_fun_ownerType"
                                placeholder="所属者类型[数据字典=OwnerType]0应用功能1管理员追加功能2用户追加功能"
                                clearable
                                size="small"
                                style="width:120px;"
                                @keyup.enter.native="handleQuery"
                                />
                          </el-form-item>-->
            
            
            <!--
                        
                                    <el-form-item label="功能类型[数据字典=FunType]1内部功能2外部功能"
                                    desc="功能类型[数据字典=FunType]1内部功能2外部功能"
                                     prop="funScope">
                                         <dic-select
                                                      v-model="queryParams.funScope"
                                                      :code="dicInner.app_fun_funScope"
                                                      placeholder="功能类型[数据字典=FunType]1内部功能2外部功能"
                                                      clearable
                                                      size="small"
                                                      style="width:120px;"
                                                      @keyup.enter.native="handleQuery"
                                                      />
                                                </el-form-item>
            -->
            
            
            <el-form-item label="功能类型"
                          desc="功能类型[数据字典=FunType] 1栏目 2功能  3按钮 "
                          prop="funType">
                <dic-select
                        v-model="queryParams.funType"
                        :code="dicInner.app_fun_funType"
                        placeholder="功能类型[数据字典=FunType] 1栏目 2功能  3按钮 "
                        clearable
                        size="small"
                        style="width:120px;"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            
            
            <el-form-item label="功能名称"
                          desc="功能名称[查询]"
                          prop="name">
                <el-input
                        v-model.trim="queryParams.name"
                        placeholder="功能名称[查询]"
                        clearable
                        size="small"
                        style="width:120px;"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            
            
            <!--    <el-form-item label="所属应用[关系=AppInfo]"
                desc="所属应用[关系=AppInfo]"
                 prop="appId">
                                  <el-input
                                  v-model.trim="queryParams.appId"
                                  placeholder="所属应用[关系=AppInfo]"
                                  clearable
                                  size="small"
                                  style="width:120px;"
                                  @keyup.enter.native="handleQuery"
                                  />
                            </el-form-item>-->
            
            
            <el-form-item>
                <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @submit.native.prevent
                        @click="handleQuery">搜索
                </el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置
                </el-button>
            </el-form-item>
        </el-form>
        
        
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5" class="buttonsRow">
                <el-button type="primary" size="small" plain @click="()=>triggerModify()">新增</el-button>
            </el-col>
            <right-toolbar
                    @layout="(_obj)=>columnsHidden=_obj"
                    :showSearch.sync="showSearch"
                    @queryTable="getInfoList"
            ></right-toolbar>
        </el-row>
        
        
        <section class="tablecontainer">
            <el-table
                    border
                    ref="multipleTable"
                
                    :data="dataList"
                    size="mini"
                    class="tabletop"
                    tooltip-effect="dark"
                    style="width: 100%"
                    @selection-change="rows=>{
         selectRows=rows
      }"
                    @row-click="row=>{
          tableRowClickOnece(row,'multipleTable')
      }"


                    row-key="id"
                    border
                    :lazy="true"
                    :load="load"
                    :tree-props="{children: 'children', hasChildren: 'haveNext'}"
                    
            >
    
                <el-table-column type="selection" width="40" align="center"></el-table-column>
                <el-table-column label="编号" width="66" align="center"></el-table-column>
    
                <el-table-column
                        label="操作" width="55" align="center">
                    <template slot-scope="scope">
                        
                        <el-popover
                                placement="top-start"
                                title="操作"
                                width="222"
                                trigger="hover"
                        >
                            
                            <div>
                                <el-button size="mini" type="text" icon="el-icon-edit"
                                           @click="()=>triggerModify(scope.row)">
                                    修改
                                </el-button>
                                <el-button size="mini" type="text" icon="el-icon-edit"
                                           @click="()=>{
                                            var parentRow={
                                            parentId:scope.row.id,
                                            parentName:scope.row.name
                                            }
                                            triggerModify(parentRow)
                                           }">
                                    添加菜单
                                </el-button>
                                
                                <el-button size="mini" type="text" icon="el-icon-notebook-1"
                                           @click="()=>openLog(scope.row)">变更日志
                                </el-button>
                                
                                <el-button size="mini" type="text" icon="el-icon-delete"
                                           @click="()=>handleDelete(scope.row)">删除
                                </el-button>
                            </div>
                            <el-button slot="reference" type="text">操作</el-button>
                        </el-popover>
                    
                    
                    </template>
                </el-table-column>
                
                
                <!--
                     <el-table-column
                                   v-if="!columnsHidden['parentIdPath']"
                                                          label="所有分类路径" prop="parentIdPath"  min-width="120px;">
                                              <template slot-scope="scope">
                                              <div>
                                                    {{scope.row.parentIdPath}}
                                              </div>
                                              </template>
                                              </el-table-column>
                -->
    
    
                <el-table-column
                        v-if="!columnsHidden['name']"
                        label="功能名称" prop="name" min-width="120px;">
                    <template slot-scope="scope">
                        <div style="display: flex;align-items: center;">
                            <svgIcon
                             style="margin-right: 5px"
                                    v-if="scope.row.img"
                                    :icon-class="scope.row.img"></svgIcon>
                           <span> {{scope.row.name}}</span>
                        </div>
                    </template>
                </el-table-column>
    
    
    
                <el-table-column
                        v-if="!columnsHidden['funUrl']"
                        label="功能地址" prop="funUrl" min-width="120px;">
                    <template slot-scope="scope">
                        <div>
                         
                            <tip-content  :overflow="1" :value="`${scope.row.funUrl}`"/>
                        </div>
                    </template>
                </el-table-column>
                

    
    
                <el-table-column
                        v-if="!columnsHidden['funType']"
                        label="功能类型" prop="funType" min-width="120px;">
                    <template slot-scope="scope">
                        <dic-tag :code="dicInner.app_fun_funType"
                                 v-model="scope.row.funType"
                        >
                        </dic-tag>
                    </template>
                </el-table-column>
                
                <el-table-column
                        v-if="!columnsHidden['orderNum']"
                        label="排序号" prop="orderNum" min-width="120px;">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.orderNum}}
                        </div>
                    </template>
                </el-table-column>
          
                
      
                
        
                
                <!--
                     
                     <el-table-column
                                   v-if="!columnsHidden['appId']"
                                                          label="所属应用[关系=AppInfo]" prop="appId"  min-width="120px;">
                                              <template slot-scope="scope">
                                              <div>
                                                    {{scope.row.appId}}
                                              </div>
                                              </template>
                                              </el-table-column>
                -->
                
                
                <el-table-column
                        label="添加时间/人" prop="add_time/add_user" v-if="!columnsHidden['add_time/add_user']">
                    <template slot-scope="scope">
                        <span>{{scope.row.addTime|dateFormatYYYYMMDD}}/{{scope.row.addUser}}</span>
                    </template>
                </el-table-column>
                
                <el-table-column
                        label="更新时间/人" prop="lastEditTime/editUser" v-if="!columnsHidden['lastEditTime/editUser']">
                    <template slot-scope="scope">
                        <span>{{scope.row.lastEditTime|dateFormatYYYYMMDD}}/{{scope.row.editUser}}</span>
                    </template>
                </el-table-column>
            
            
            </el-table>
            
            
            <el-pagination
                    :background="true"
                    style="padding: 20px;"
                    :current-page.sync="queryParams.pageNum"
                    :page-size="queryParams.pageSize"
                    layout="prev, pager, next"
                    :total="total"
                    @size-change="(pageSize)=>{$data.queryParams.pageSize=pageSize;dataList=[];getInfoList();}"
                    @current-change="(pageNum)=>{$data.queryParams.pageNum=pageNum;dataList=[];getInfoList();}"
            >
            </el-pagination>
        
        
        </section>
    </div>


</template>

<script>
  import { formData, formMethod, PageData } from '@/utils/formcommon';
  import { getUrlParam, dateFormatYYYYMMDD } from '@/utils/index';
  import { default as FormDialog } from '@codegenarate/mydialogplus';
  
  import * as  api from '@/apis/appFun.api.js';
  
  const dicInner = {
    
    '___app_fun_lastEditTime': '最近更新时间',
    'app_fun_lastEditTime': 'app_fun_lastEditTime',
    
    '___app_fun_editUserId': '最近更新人ID',
    'app_fun_editUserId': 'app_fun_editUserId',
    
    '___app_fun_addTime': '添加时间',
    'app_fun_addTime': 'app_fun_addTime',
    
    '___app_fun_addUser': '添加人',
    'app_fun_addUser': 'app_fun_addUser',
    
    '___app_fun_delState': '有效状态[数据字典=del_state] 1有效  5删除',
    'app_fun_delState': 'app_fun_delState',
    
    '___app_fun_parentIdPath': '所有分类路径',
    'app_fun_parentIdPath': 'app_fun_parentIdPath',
    
    '___app_fun_funUrl': '功能地址[查询]',
    'app_fun_funUrl': 'app_fun_funUrl',
    
    '___app_fun_serverNumber': '服务器编号ID',
    'app_fun_serverNumber': 'app_fun_serverNumber',
    
    '___app_fun_editUser': '最近更新人',
    'app_fun_editUser': 'app_fun_editUser',
    
    '___app_fun_addUserId': '添加人ID',
    'app_fun_addUserId': 'app_fun_addUserId',
    
    '___app_fun_state': '当前状态[查询] 1开启  5关闭  ',
    'app_fun_state': 'app_fun_state',
    
    '___app_fun_orderNum': '排序号',
    'app_fun_orderNum': 'app_fun_orderNum',
    
    '___app_fun_img': '分类图片[查询]',
    'app_fun_img': 'app_fun_img',
    
    '___app_fun_deep': '功能深度[查询]',
    'app_fun_deep': 'app_fun_deep',
    
    '___app_fun_parentId': '所属上级类别[关系=SysClass]',
    'app_fun_parentId': 'app_fun_parentId',
    
    '___app_fun_mobileUrl': '移动端功能地址',
    'app_fun_mobileUrl': 'app_fun_mobileUrl',
    
    '___app_fun_mobileState': '移动端应用状态',
    'app_fun_mobileState': 'app_fun_mobileState',
    
    '___app_fun_ownerType': '所属者类型[数据字典=OwnerType]0应用功能1管理员追加功能2用户追加功能',
    'app_fun_ownerType': 'app_fun_ownerType',
    
    '___app_fun_funScope': '功能类型[数据字典=FunType]1内部功能2外部功能',
    'app_fun_funScope': 'app_fun_funScope',
    
    '___app_fun_funType': '功能类型[数据字典=FunType] 1栏目 2功能  3按钮 ',
    'app_fun_funType': 'app_fun_funType',
    
    '___app_fun_name': '功能名称[查询]',
    'app_fun_name': 'app_fun_name',
    
    '___app_fun_appId': '所属应用[关系=AppInfo]',
    'app_fun_appId': 'app_fun_appId',
    
    '___app_fun_id': '系统功能信息表[查询]',
    'app_fun_id': 'app_fun_id',
    
  };
  
  export default {
    name: 'appFunlist',
    data() {
      return {
        api: api,
        dicInner,
        ...formData,
        queryParams: {
          name: '',
          searchKey: '',
          
          'lastEditTime': '',
          
          'editUserId': '',
          
          'addTime': '',
          
          'addUser': '',
          
          'delState': '',
          
          'parentIdPath': '',
          
          'funUrl': '',
          
          'serverNumber': '',
          
          'editUser': '',
          
          'addUserId': '',
          
          'state': '',
          
          'orderNum': '',
          
          'img': '',
          
          'deep': '',
          
          'parentId': '',
          
          'mobileUrl': '',
          
          'mobileState': '',
          
          'ownerType': '',
          
          'funScope': '',
          
          'funType': '',
          
          'name': '',
          
          'appId': '',
          
          'id': '',
  
          parentId: 0,
          ...PageData,
        },
        lists: [],
        selectRows: [],
        classId: '',
        classIdPath: '',
        className: '',
        loading: false,
        isFold: false,
        tableRowClassName({ row, rowIndex }) {
          if (row.rowType == 'total') {
            return 'total-row';
          }
          return '';
        },
      };
    },
    components: {
      svgIcon: () => import('@codegenarate/svg-icon'),
      tipContent: () => import('@/components/tipcontent/index.vue'),
      dicSelect: () => import('@/components/dicselect.vue'),
      dicTag: () => import('@/components/DicSelect/dic-tag.vue'),
      RightToolbar: () => import('@/components/RightToolbar/index.vue'),
    },
    mounted() {
      if (this.$props['immediate']) {
        this.getInfoList();
      }
    },
    filters: {
      dateFormatYYYYMMDD: dateFormatYYYYMMDD,
    },
    computed: {},
    watch: {},
    props: {
      immediate: {
        type: [Boolean],
        default() {
          return true;
        },
      },
    },
    methods: {
      ...formMethod,
      async load(treeData, treeNode, resolve) {
        var params = {
          pageNum: 1,
          pageSize: 100,
          parentId: treeData&&treeData.id,
        };
        var result = await api.getList(params);
        resolve(result && result.data || []);
      },
      /**
       * @description:
       * @params _data.dataList
       * @return
       */
      initByDialog(_data) {
        this.dataList = _data && _data.dataList || [];
      },
      tableRowClickOnece(row, tableRef, options) {
        var table = this.$refs[tableRef];
        if (options && options.canSelect) {
          var istrue = options.canSelect(row);
          if (!istrue) {
            table && table.toggleRowSelection(row, false);
          }
        }
        table && table.clearSelection();
        table && table.toggleRowSelection(row);
      },
      async triggerModify(row) {
        var result = await FormDialog({
          width: '888px',
          title: row && row.id ? '编辑菜单' : '新增菜单',
          data() {
            return { ...row };
          },
          components: {
            modify: () => import('./AppFunModify.vue'),
          },
        });
        if (!(result && result.success)) {
          return result;
        }
        this.getInfoList();
      },
      
    },
  };
</script>
